<!-- components/CarForm.vue -->
<template>
  <u-form class="form-content">
    <!-- 车牌号码输入 -->
    <u-form-item label="车牌号码" class="form-item" label-width="120">
      <u-input
        v-model="localFormData.plateNumber"
        placeholder="请输入车牌号码"
        class="custom-input"
        @input="updateFormData"
      />
    </u-form-item>

    <!-- 车牌颜色选择 -->
    <u-form-item label="车牌颜色" class="form-item" label-width="120">
      <view class="arrow-icon-groud">
        <u-input
          class="custom-input"
          v-model="localFormData.plateColor"
          placeholder="请选择车牌颜色"
          @click="changeOpenCarColor"
        />
        <!-- 向下/向上箭头图标 -->
        <u-icon
          :name="plateColorPickerVisible ? 'arrow-up' : 'arrow-down'"
          size="20"
          class="arrow-icon"
        />
      </view>

      <area-picker
        ref="carPicker"
        :title="title"
        titleColor="#808080"
        titleFontSize="14px"
        cancelType="icon"
        cancelColor="#999999"
        cancleFontSize="28rpx"
        confirmColor="#2877FF"
        confirmFontSize="14px"
        confirmFontWeight="500"
        itemFontSize="14px"
        @onClose="closeCarPicker"
        @onConfirm="confirmCarPicker"
        :pickerList="list"
      />
    </u-form-item>
  </u-form>
</template>

<script>
export default {
  props: {
    formData: Object,
    list: Array,
    title: String,
    plateColorPickerVisible: Boolean,
  },
  data() {
    return {
      localFormData: { ...this.formData },
    };
  },
  watch: {
    formData: {
      handler(newVal) {
        this.localFormData = { ...newVal };
      },
      deep: true,
    },
  },
  methods: {
    updateFormData() {
      this.$emit("update:formData", { ...this.localFormData });
    },
    changeOpenCarColor() {
      this.$refs.carPicker._open();
    },
    closeCarPicker() {
      this.$refs.carPicker._close();
    },
    confirmCarPicker(checkedValue) {
      this.localFormData.plateColor = checkedValue;
      this.updateFormData();
    },
  },
};
</script>

<style scoped lang="scss">
.form-content {
  background-color: #ffffff;
  padding: 0;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-item {
  padding: 0 10px;
  border-bottom: 1px solid #f1f1f1;
}

.custom-input {
  border: none;
  background-color: transparent;
}

.arrow-icon-groud {
  position: relative;
  flex: 1;

  .arrow-icon {
    position: absolute !important;
    right: 20px;
    top: 10px;
  }
}
</style>
